<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <view class="Wrapper">
            <view class="list">
                <text class="title">商品:</text>
                <view class="content" @click="selectShop">
                    <view class="noGoods" v-if="!goodsItem">
                        <view class="iconfont icon-tianjia color_cc size60"></view>
                        <text class="color_cc size28 m-top10">点击选择商品</text>
                    </view>
                    <view class="row" v-else>
                        <image :src="$imgUrls(goodsItem.img)" mode="aspectFill" class="goodsImg"></image>
                        <view class="flex-1 d-flex f-column j-sb">
                            <text class="black size30 bold500 ellipsis_2">{{ goodsItem.name }}</text>
                            <view class="d-flex a-center color_ff4 bold">
                                <text class="size26">￥</text>
                                <text class="size30">{{ goodsItem.price }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="list">
                <text class="title">需求:</text>
                <input type="text" v-model="demand" class="priceNum" placeholder="请输入需求" />
            </view>

            <view class="list">
                <text class="title">收购价:</text>
                <input type="digit" v-model="price" class="priceNum" placeholder="请输入收购价" />
            </view>

            <view class="list">
                <text class="title">收购量:</text>
                <input type="number" v-model="num" class="priceNum" placeholder="请输入收购量" />
            </view>

            <view class="addresbox">
                <text class="title">配送地址</text>
                <view class="address" @click="showAddress = true">
                    <view class="noAddres" v-if="!Address">添加收货地址</view>
                    <view class="adddBopx" v-else>
                        <view class="flex-1 d-flex f-column">
                            <text class="black size30 bold500">{{ Address.Aregion }}</text>
                            <text class="color_33 size28 m-top10">{{ Address.Aaddress }}</text>
                            <view class="contact">
                                <text class="contact_Name">{{ Address.Aname }}</text>
                                <text class="contact_Tel">{{ Address.Amobile || Address.uTel }}</text>
                            </view>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye color_99 size30 m-left20"></text>
                    </view>
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="Btn cancel" @click="back()">取消</view>
            <view class="Btn config" @click="addSnatch">发布并支付诚意金</view>
        </view>

        <Address :Address="Address" v-if="showAddress" @close="showAddress = false" @Update="getOldAddress"></Address>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Address from '@/grab/components/Address.vue';
    export default {
        components: {
            Address
        },
        data() {
            return {
                Address: '',
                showAddress: false,
                goodsItem: '',
                snatch_type: 2,
                title: '发布',
                price: '',
                num: '',
                demand: ''
            };
        },
        onLoad(opt) {
            if (opt.snatch_type) this.snatch_type = opt.snatch_type;
        },
        onShow() {
            let that = this;
            uni.$on('updateData', function (data) {
                that.goodsItem = data;
            });
            this.getOldAddress();
        },
        methods: {
            selectShop() {
                this.toUrl(`selectShop`);
            },
            getOldAddress(e) {
                this.$http
                    .get({
                        url: '/SRA_simMallApi/getOldAddress',
                        data: {
                            type: 3
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.Address = result;
                    });
            },
            addSnatch() {
                if (!this.goodsItem) return this.$Toast('请选择商品');
                if (!this.price) return this.$Toast('请输入收购价');
                if (!this.num) return this.$Toast('请输入收购量');
                if (!this.demand) return this.$Toast('请输入需求');
                if (!this.Address) return this.$Toast('请选择配送地址');
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SnatchApi/addSnatch',
                        data: {
                            snatch_type: this.snatch_type,
                            goods_id: this.goodsItem.goods_id,
                            price: this.price,
                            num: this.num,
                            demand: this.demand,
                            address_id: this.Address.address_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.Play(result);
                    });
            },
            async Play(data) {
                const result = await this.$pop.getPayment(data);
                if (!result) return;
                const palyResult = await this.$Modals('提示', '支付成功', '返回', '我的发布');
                if (!palyResult) return this.$back();
                this.toUrl(`myPost?snatch_type=2`);
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'totalHeight'])
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 180rpx;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 710rpx;
        margin: 0 auto;
        .list {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            margin-top: 24rpx;
            .title {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                .noGoods {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 20rpx 0;
                }
                .goodsImg {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 10rpx;
                    border: 1px solid $page;
                    margin-right: 20rpx;
                }
            }
            .priceNum {
                flex: 1;
                height: 80rpx;
                color: #000;
                font-size: 32rpx;
            }
        }

        .addresbox {
            width: 100%;
            background-color: #fff;
            padding: 20rpx;
            display: flex;
            flex-direction: column;
            margin-top: 24rpx;
            border-radius: 10rpx;
            .title {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
            }
            .address {
                width: 100%;
                margin-top: 10rpx;

                .noAddres {
                    width: 250rpx;
                    height: 80rpx;
                    border: 1px solid #f1f1f1;
                    border-radius: 40rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #999;
                    font-size: 28rpx;
                    margin: 20rpx auto;
                }
                .adddBopx {
                    width: 100%;
                    padding: 20rpx;
                    display: flex;
                    align-items: center;

                    .contact {
                        display: flex;
                        align-items: center;
                        margin-top: 14rpx;

                        &_Name {
                            color: #333;
                            font-size: 28rpx;
                            margin-right: 24rpx;
                        }

                        &_Tel {
                            color: #333;
                            font-size: 28rpx;
                        }
                    }
                }
            }
        }
    }

    .footer {
        width: 100%;
        padding: 0 20rpx;
        position: fixed;
        bottom: 50rpx;
        left: 0;
        z-index: 200;
        display: flex;
        justify-content: space-around;
        .Btn {
            width: 320rpx;
            height: 88rpx;
            border-radius: 44rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cancel {
            background-color: #c9c9c9;
            color: #666;
            font-size: 36rpx;
        }
        .config {
            background-color: var(--color);
            color: #fff;
            font-size: 30rpx;
        }
    }
</style>
